<template>
  <div class="age-range-select">
    <el-input-number
      v-model="age1"
      :min="props.min"
      :max="age1Max"
      :controls="false"
    />
    <span class="split">至</span>
    <el-input-number
      v-model="age2"
      :min="age2Min"
      :max="props.max"
      :controls="false"
    />
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
const emit = defineEmits(['update:begin', 'update:end'])
const props = defineProps({
  begin: {
    type: Number,
    default: 1
  },
  end: {
    type: Number,
    default: 150
  },
  min:{
    type:Number,
    default:1
  },
  max:{
    type:Number,
    default:150
  }
})

const age1 = computed({
  get(val) {
    return props.begin
  },
  set(val) {
    if (val) {
      emit('update:begin', val)
    }
  }
})
const age2 = computed({
  get(val) {
    return props.end
  },
  set(val) {
    if (val) {
      emit('update:end', val)
    }
  }
})
const age1Max = computed(()=>{
    return age2.value
})
const age2Min = computed(()=>{
    return age1.value
})
</script>
<style lang="scss" scoped>
.age-range-select{
    display: flex;
    align-items: center;
    width: 200px;
    .split{
        margin: 0 10px;
        font-size: 12px;
        color: #777;
    }
}
</style>
